<template>
	<view class="container">
		<!-- 顶部面板 -->
		<view class="top_panel">
			<view class="shop">
				<view class="shop_name" @click="hddelGoto">添加收货地址 <u-icon name="arrow-right" color="#333"
						size="16"></u-icon></view>
				<!-- <u-icon name="arrow-right" color="#666" size="26"></u-icon> -->
				<view class="shop_dist">距离您2.7km</view>
			</view>
			<!-- <view class="tab_list">
				<view @click="handelTab(index)" :class="['tab', index === tabUnt ? 'ac_tab' : '']"
					v-for="item, index in tabList" :key="index">{{ item
					}}
				</view>
			</view> -->
		</view>
		<!-- 滚动区域 -->
		<view class="scroll-panel" id="scroll-panel">
			<view class="list-box">
				<view class="left">
					<scroll-view class="scrollView" scroll-y="true" :style="{ 'height': scrollHeight + 'px' }"
						:scroll-into-view="leftIntoView" :scroll-with-animation="false">
						<view class="item" v-for="(item, index) in leftArray" :key="index"
							:class="{ 'active': index == leftIndex }" :id="'left-' + index" :data-index="index"
							@tap="leftTap">
							{{ item }}
							<view :class="{ 'line': index == leftIndex }"></view>
						</view>
					</scroll-view>
				</view>
				<view class="main">
					<scroll-view scroll-y="true" :style="{ 'height': scrollHeight + 'px' }" @scroll="mainScroll"
						:scroll-into-view="scrollInto" :scroll-with-animation="false">
						<view class="item main-item" v-for="(item, index) in mainArray" :key="index" :id="'item-' + index">
							<view class="title">
								<view>{{ item.title }}</view>
							</view>
							<view class="goods" v-for="(item2, index2) in item.list" :key="index2">
								<image class="goods_cover" src="https://img.fy6b.com/2023/02/23/f2917f486f0b4.png" mode="">
								</image>
								<view class="goods_info">
									<view class="goods_title">第{{ index2 + 1 }}个商品标题</view>
									<view class="a">

									</view>
									<view class="money">{{ item2.goods_price }}</view>
									<!-- <view class="redact" v-if="index2 < 2">
										<view v-if="item2.goods_count > 0" class="reduce"
											@click="handelReduce(item2, index2)">
											<image src="../../static/icon/reduce.png" alt=""></image>
										</view>
										<view v-if="item2.goods_count > 0" class="goods_count">{{ item2.goods_count }}
										</view>
										<view class="add" @click="handelAdd(item2, index2)">
											<image src="../../static/icon/add.png" alt=""></image>
										</view>
									</view> -->
									<view v-if="index2 < 3" class="redact">
										<u-number-box v-model="item2.goods_count" step="1" :min="0"
											:showMinus="item2.goods_count > 0">
											<view slot="minus" class="minus" @click="handelReduce(item2, index2)">
												<u-icon name="https://img.fy6b.com/2023/02/27/b5803110f49eb.png"
													size="20"></u-icon>
											</view>
											<text slot="input" class="input">{{
												item2.goods_count > 0 ? item2.goods_count : ""
											}}</text>
											<view slot="plus" class="plus" @click="handelAdd(item2, index2)">
												<u-icon name="https://img.fy6b.com/2023/02/23/c36fc1ed9a7fa.png"
													color="#FFFFFF" size="20"></u-icon>
											</view>
										</u-number-box>
									</view>
									<view v-else class="optional" @click="handelShopOptional(item2)">选规格</view>
								</view>
							</view>
						</view>
						<view class="fill-last" :style="{ 'height': fillHeight + 'px' }"></view>
					</scroll-view>
				</view>
			</view>
		</view>
		<!-- 底部面板 -->
		<view class="bottom_panel">
			<!-- 购物车 -->
			<u-popup :overlay="overlay" :round="10" :show="show" @close="close1" @open="open" mode="bottom">
				<view class="cart_box" v-show="cartShow">
					<view class="cart_top">
						<view class="cart_lb">已选餐品</view>
						<view class="clear" @click="modShow = true">
							<image src="../../static/icon/clear.png"></image> 清空
						</view>
					</view>
					<view class="cart_list">
						<view class="cart_item" v-for="item, index in cart" :key="index">
							<view class="cart_cover">
								<image src="https://img.fy6b.com/2023/02/23/f2917f486f0b4.png"></image>
								<view>
									<view class="cart_goods_name">{{ item.goods_name }}</view>
									<view class="cart_goods_price">￥ {{ item.goods_price }}</view>
								</view>

							</view>
							<u-number-box v-model="item.goods_count" step="1" :min="0" :showMinus="item.goods_count > 0">
								<view slot="minus" class="minus">
									<u-icon name="https://img.fy6b.com/2023/02/27/b5803110f49eb.png" size="20"></u-icon>
								</view>
								<text slot="input" style="width: 50px;text-align: center;" class="input">{{ item.goods_count
								}}</text>
								<view slot="plus" class="plus">
									<u-icon name="https://img.fy6b.com/2023/02/23/c36fc1ed9a7fa.png" color="#FFFFFF"
										size="20"></u-icon>
								</view>
							</u-number-box>
						</view>
					</view>
				</view>
				<view class="footer_an">
					<view class="price">
						<view class="pr_label">
							<image @click="handelCart" class="pr_icon" src="../../static/icon/cart.png" mode="">
							</image>
							<view class="count">{{ cartCount }}</view>

						</view>
						<view class="total_price"> ￥{{ totalPrices }}</view>
					</view>
					<view class="balance_brn" @click="commitOrder">去结算</view>
				</view>
			</u-popup>
			<!-- 选规格 -->
			<u-popup :show="show1" mode="bottom" @close="close" @open="open">
				<view class="shop_box">
					<img @click="show1 = false" class="close_icon" src="../../static/icon/close.png" alt="">
					<view class="shop_info">
						<view class="shop_top">
							<image class="cover" src="https://img.fy6b.com/2023/02/23/f2917f486f0b4.png"></image>
							<view class="shop">
								<view class="name">{{ optionalObj.goods_name }}</view>
								<view class="price">￥ {{ optionalObj.goods_price }}</view>
							</view>
						</view>
						<view class="shop_label">口味</view>
						<view class="taste_list">
							<view v-for="(i, t) in tastes" :key="t" :class="['tas_item', t === tasteCount ? 'tab_s' : '']"
								@click="handelTaste(t)">{{
									i }}</view>
						</view>
						<view class="shop_label">喜好</view>
						<view class="taste_list">
							<view v-for="(i, t) in loves" :key="t" :class="['tas_item', t === loveCount ? 'tab_s' : '']"
								@click="handelLove(t)">{{
									i }}</view>
						</view>
					</view>
					<view class="shop_footer">
						<view class="shop_count">
							<view class="text">数量</view>
							<u-number-box v-model="optionalObj.goods_count" step="1" :min="0" :showMinus="optionalObj.goods_count > 0">
								<view slot="minus" class="minus">
									<u-icon name="https://img.fy6b.com/2023/02/27/b5803110f49eb.png" size="20"></u-icon>
								</view>
								<text slot="input" class="input">{{ optionalObj.goods_count > 0 ? optionalObj.goods_count :
									''
								}}</text>
								<view slot="plus" class="plus" @click="handelAdd(optionalObj)">
									<u-icon name="https://img.fy6b.com/2023/02/23/c36fc1ed9a7fa.png" color="#FFFFFF"
										size="20"></u-icon>
								</view>
							</u-number-box>
						</view>
						<view class="footer_cart_btn" @click="handelAddCart">加入购物车</view>
					</view>
				</view>
			</u-popup>
			<!-- 彈框 -->
			<u-modal :show="modShow" :closeOnClickOverlay="true" showCancelButton confirmColor="#DC483C" :title="title"
				:content='content' @cancel="modShow = false" @confirm="moConfirm" @close="() => modShow = false"></u-modal>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations, mapGetters } from "vuex";
export default {
	data() {
		return {
			goodList: [
				{
					goods_id: 1,
					goods_name: "电视机",
					goods_price: "99",
					goods_count: 0,
					goods_small_logo:
						"https://img0.baidu.com/it/u=2767187060,1983520707&fm=253&fmt=auto&app=138&f=JPEG?w=834&h=500",
					goods_state: false,
				},
				{
					goods_id: 2,
					goods_name: "电视机1",
					goods_price: "69",
					goods_count: 0,
					goods_small_logo:
						"https://img0.baidu.com/it/u=2767187060,1983520707&fm=253&fmt=auto&app=138&f=JPEG?w=834&h=500",
					goods_state: false,
				},
				{
					goods_id: 3,
					goods_name: "电视机2",
					goods_price: "99",
					goods_count: 0,
					goods_small_logo:
						"https://img0.baidu.com/it/u=2767187060,1983520707&fm=253&fmt=auto&app=138&f=JPEG?w=834&h=500",
					goods_state: false,
				},
				{
					goods_id: 4,
					goods_name: "电视机3",
					goods_price: "89",
					goods_count: 0,
					goods_small_logo:
						"https://img0.baidu.com/it/u=2767187060,1983520707&fm=253&fmt=auto&app=138&f=JPEG?w=834&h=500",
					goods_state: false,
				},
			],
			// tabList: ['自取', '外卖'],
			// tabUnt: 0,
			scrollHeight: 400,
			scrollTopSize: 0,
			fillHeight: 0,	// 填充高度，用于最后一项低于滚动区域时使用
			leftArray: [],
			mainArray: [],
			topArr: [],
			leftIndex: 0,
			scrollInto: '',

			show: false,
			show1: false,
			cartShow: false,
			overlay: false,
			cartCount: 0,
			totalPrices: 0,

			modShow: false,
			title: '提示',
			content: '确定要清空购物车吗?',


			optionalObj: {},// 规格商品
			tastes: ['免辣', '加辣'],
			tasteCount: 0,
			loves: ['加香菜葱', '免辣'],
			loveCount: 0,

		}
	},
	onLoad() {
		// if (this.total > 0) {
		// 	this.show = true
		// }
	},
	computed: {
		/* 计算左侧滚动位置定位 */
		leftIntoView() {
			return `left-${this.leftIndex > 3 ? (this.leftIndex - 3) : 0}`;
		},
		...mapGetters("m_cart", ["total", "totalPrice",]),
		...mapState("m_cart", ['cart'])

	},
	watch: {
		total(val) {
			this.cartCount = val
		},
		totalPrice(val) {
			console.log('ppppppp', val);
			this.totalPrices = val
		}
	},
	onReady() {
		/* 在非H5平台，nextTick回调后有概率获取到错误的元素高度，则添加200ms的延迟来减少BUG的产生 */
		setTimeout(() => {
			/* 等待滚动区域初始化完成 */
			this.initScrollView().then(() => {
				/* 获取列表数据，你的代码从此处开始 */
				this.getListData();
			})
		}, 100);
	},

	methods: {
		...mapMutations("m_cart", ["addToCart", "clearCart"]),
		handelTab(index) {
			this.tabUnt = index
		},
		hddelGoto() {
			uni.navigateTo({
				url: '/pages/adderss/adderss'
			});
		},
		// 打开购物车
		handelCart() {
			if(this.cart.length===0)return
			this.cartShow = !this.cartShow
			this.overlay = !this.overlay
		},
		// 清空购物车
		moConfirm() {
			this.clearCart()
			this.modShow = false
			this.cartShow = false

		},
		// 加入购入车
		handelAddCart(){
			this.show1 = false
		},
		// 去结算
		commitOrder() {
			uni.navigateTo({
				url: '/pages/submitOrder/submitOrder'
			});
		},
		close() {
			this.show1 = false
		},
		close1() {
			this.cartShow = false
			this.overlay = false
		},
		handelReduce(item) {
			item.goods_count--
			if (item.total <= 0) {
				this.show = false
				return
			}
		},
		handelAdd(item, index) {
			// console.log(item, index);
			// item.goods_count++
			this.show = true
			this.addToCart(item)
		},
		open() {
			// console.log('open');
		},

		// 选规格
		handelShopOptional(item) {
			this.show1 = true
			this.optionalObj = item
			console.log(item);
		},
		// 选择口味
		handelTaste(index) {
			this.tasteCount = index
		},
		// 选择喜好
		handelLove(index) {
			this.loveCount = index
		},
		/* 初始化滚动区域 */
		initScrollView() {
			return new Promise((resolve, reject) => {
				let view = uni.createSelectorQuery().select('#scroll-panel');
				view.boundingClientRect(res => {
					this.scrollTopSize = res.top;
					this.scrollHeight = res.height;
					setTimeout(() => {
						resolve();
					}, 100);
				}).exec();
			});
		},
		/* 获取列表数据 */
		getListData() {
			new Promise((resolve, reject) => {
				uni.showLoading();
				// 模拟数据
				let mockData = () => {
					let [left, main] = [[], []];
					let size = Math.floor(Math.random() * 16);
					size = size < 10 ? 10 : size;
					for (let i = 0; i < size; i++) {
						left.push(`${i + 1}类商品`);

						let list = [];
						let r = Math.floor(Math.random() * 10);
						r = r < 5 ? 5 : r;
						for (let j = 0; j < r; j++) {
							list.push(...this.goodList);
						}
						main.push({
							title: `第${i + 1}类商品标题`,
							list
						})
					}

					return {
						left,
						main
					}
				}
				setTimeout(() => {
					let res = mockData();
					let { left, main } = res;
					// 将请求接口返回的数据传递给 Promise 对象的 then 函数。
					resolve({ left, main });
				}, 1000);
			}).then((res) => {
				console.log('-----------请求接口返回数据示例-------------');
				console.log(res);

				uni.hideLoading();
				this.leftArray = res.left;
				this.mainArray = res.main;

				// DOM 挂载后 再调用 getElementTop 获取高度的方法。
				setTimeout(() => {
					this.getElementTop();
				}, 100);
			});
		},
		/* 获取元素顶部信息 */
		getElementTop() {
			new Promise((resolve, reject) => {
				let view = uni.createSelectorQuery().selectAll('.main-item');
				view.boundingClientRect(data => {
					resolve(data);
				}).exec();
			}).then((res) => {
				let topArr = res.map((item) => {
					return item.top - this.scrollTopSize;	/* 减去滚动容器距离顶部的距离 */
				});
				this.topArr = topArr;

				/* 获取最后一项的高度，设置填充高度。判断和填充时做了 +-20 的操作，是为了滚动时更好的定位 */
				let last = res[res.length - 1].height;
				if (last - 20 < this.scrollHeight) {
					this.fillHeight = this.scrollHeight - last + 20;
				}
			});
		},
		/* 主区域滚动监听 */
		mainScroll(e) {
			// 节流方法
			clearTimeout(this.mainThrottle);
			this.mainThrottle = setTimeout(() => {
				scrollFn();
			}, 10);

			let scrollFn = () => {
				let top = e.detail.scrollTop;
				let index = 0;
				/* 查找当前滚动距离 */
				for (let i = (this.topArr.length - 1); i >= 0; i--) {
					/* 在部分安卓设备上，因手机逻辑分辨率与rpx单位计算不是整数，滚动距离与有误差，增加2px来完善该问题 */
					if ((top + 2) >= this.topArr[i]) {
						index = i;
						break;
					}
				}
				this.leftIndex = (index < 0 ? 0 : index);
			}
		},
		/* 左侧导航点击 */
		leftTap(e) {
			let index = e.currentTarget.dataset.index;
			this.scrollInto = `item-${index}`;
		}
	}
}
</script>

<style lang="scss">
page {
	height: 100vh;
}

.scrollView ::-webkit-scrollbar {
	width: 0;
	height: 0;
	color: transparent;
	display: none;
}

.container {
	height: 100%;

	.scrollView ::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
		display: none;
	}

	.top_panel {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		background: #FFFFFF;
		border-bottom: 1px solid #EEEEEE;

		.shop {
			.shop_name {
				display: flex;
				align-items: center;
				font-size: 32rpx;

				font-weight: 500;
				color: #333333;
			}

			.shop_dist {
				font-size: 24rpx;

				font-weight: 400;
				color: #999999;
				margin-top: 16rpx;
			}
		}

		.tab_list {
			display: flex;
			align-items: center;
			background: #F8F8F8;
			border-radius: 28rpx;

			.tab {
				width: 90rpx;
				height: 56rpx;
				text-align: center;
				line-height: 56rpx;
				border-radius: 28rpx;
				font-size: 24rpx;

				font-weight: 400;
				background: #F8F8F8;
				border-radius: 28rpx;
				color: #666;

			}

			.ac_tab {
				color: #FFFFFF;
				background: #FF7D09;
			}
		}
	}
}

/* 容器 */
.container {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;


	&>view {
		width: 100%;
	}

	.scroll-panel {
		flex-grow: 1;
		height: 0;
		overflow: hidden;
	}

	.bottom_panel {
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.cart_box {
			padding: 30rpx;
			border-radius: 24rpx 24rpx 0rpx 0rpx;

			.cart_top {
				display: flex;
				align-items: center;
				padding-bottom: 30rpx;
				justify-content: space-between;

				.cart_lb {
					color: #222222;
					font-size: 30rpx;
				}

				.clear {
					display: flex;
					align-items: center;

					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 10rpx;
					}
				}
			}

			.cart_list {
				.cart_item {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					margin-bottom: 20rpx;

					.cart_cover {
						display: flex;



						image {
							width: 160rpx;
							height: 160rpx;
							margin-right: 21rpx;
						}

						.cart_goods_name {
							font-size: 30rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #222222;
							margin-top: 10rpx;
						}

						.cart_goods_price {
							font-size: 32rpx;
							font-family: PingFang SC;
							font-weight: 300;
							color: #DC483C;
							margin-top: 20rpx;
						}
					}

					u-number-box {
						.minus {
							u-icon {}
						}

						text.input {}

						.plus {
							u-icon {}
						}
					}
				}
			}
		}

		.footer_an {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 30rpx;
			border-top: 1px solid #EEEEEE;
			;


			.price {
				display: flex;
				align-items: center;

				.pr_label {
					position: relative;
					width: 80rpx;
					height: 80rpx;
				}

				.pr_icon {
					width: 80rpx;
					height: 80rpx;
				}

				.total_price {
					margin-left: 39rpx;
					font-size: 36rpx;

					font-weight: 500;
					color: #222222;
				}

				.count {
					position: absolute;
					right: -10rpx;
					top: -10rpx;
					width: 40rpx;
					height: 40rpx;
					text-align: center;
					line-height: 40rpx;
					background: #F14B43;
					border-radius: 50%;
					font-size: 24rpx;

					font-weight: 400;
					color: #FFFFFF;
				}


			}

			.balance_brn {
				width: 200rpx;
				height: 78rpx;
				line-height: 78rpx;
				text-align: center;
				background: #DC483C;
				border-radius: 39rpx;
				font-size: 30rpx;

				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}

	.minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #E6E6E6;
		border-style: solid;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 22px;
		height: 22px;
		//background-color: #FF0000;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}

	.shop_box {
		position: relative;
		padding: 30rpx;

		.close_icon {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			right: 30rpx;
			top: 30rpx;
		}

		.shop_info {
			.shop_top {
				display: flex;
			}

			.cover {
				width: 220rpx;
				height: 220rpx;
				background: #F6F6F6;
				border-radius: 12px;
			}

			.shop {
				margin-left: 30rpx;

				.name {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #222222;
					margin-top: 15rpx;
				}

				.price {
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #DC483C;
					margin-top: 31rpx;
				}
			}

			.shop_label {
				font-size: 30rpx;
				padding: 30rpx 0;
				font-weight: 500;
				color: #222222;
			}

			.taste_list {
				display: flex;
				align-items: center;

				.tas_item {
					padding: 21rpx 39rpx;
					background: #F3F3F3;
					border-radius: 4rpx;
					margin-right: 30rpx;
				}

				.tab_s {
					color: #fff;
					background: #DC483C;
				}
			}

		}

		.shop_footer {
			border-top: 1px solid #EEEEEE;
			margin-top: 40rpx;

			.shop_count {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 20rpx 0;

				.text {}


			}

			.footer_cart_btn {
				width: 690rpx;
				height: 78rpx;
				background: #DC483C;
				border-radius: 39rpx;
				text-align: center;
				line-height: 78rpx;
				color: #fff;
				margin: 0 auto;
			}
		}
	}
}


.list-box {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
	font-size: 28rpx;

	.left {
		width: 180rpx;
		background-color: #fff;
		line-height: normal;
		box-sizing: border-box;
		font-size: 32rpx;
		border-right: 1rpx solid #EEEEEE;

		.item {
			padding: 42rpx 0rpx;
			position: relative;
			font-size: 26rpx;
			font-weight: 400;
			color: #8D8D8D;
			text-align: center;



			.line {
				position: absolute;
				top: 36rpx;
				left: 0;
				width: 10rpx;
				height: 48rpx;
				background: #DC483C;
				border-radius: 5rpx;

			}

			&+.item {
				margin-top: 1px;

				&::after {
					content: '';
					display: block;
					height: 0;

					width: 620upx;
					position: absolute;
					top: -1px;
					right: 0;
					transform: scaleY(0.5);
					/* 1px像素 */
				}
			}

			&.active {
				background-color: #F6F6F6;
				position: relative;
				font-size: 30rpx;

				font-weight: 500;
				color: #222222;
				//&::before {
				//	content: '';
				//	display: block;
				//	position: absolute;
				//	top: 0;
				//	left: 0;
				//	border-left: #FF7D09 solid 10rpx;
				//	height: 100%;
				//	width: 0;
				//}
			}
		}

		.fill-last {
			height: 0;
			width: 100%;
			background: none;
		}
	}

	.main {
		background-color: #fff;
		padding-left: 20rpx;
		width: 0;
		flex-grow: 1;
		box-sizing: border-box;



		.title {
			line-height: normal;
			padding: 30rpx 0;
			background-color: #fff;
			position: sticky;
			top: 0;
			z-index: 19;
			font-size: 32rpx;
			font-weight: 500;
			color: #222222;
		}

		.item {
			position: relative;
			padding-bottom: 16rpx;
			//border-bottom: #eee solid 1px;
			font-size: 28rpx;
			font-weight: 400;
			color: #666666;
		}

		.goods {
			position: relative;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: flex-start;
			align-content: center;

			&+.goods {
				margin-top: 16rpx;
			}



			&>image {
				width: 160rpx;
				height: 160rpx;
				margin-right: 16rpx;
				margin-left: 2px;
				border-radius: 10rpx;
			}

			.goods_title {
				font-size: 30rpx;

				font-weight: 500;
				color: #303133;
				margin-top: 20rpx;

			}

			.describe {
				font-size: 24rpx;
				color: #999;
			}

			.money {
				font-size: 30rpx;

				font-weight: 400;
				color: #DC483C;
				margin-top: 20rpx;
			}

			.redact {
				position: absolute;
				right: 30rpx;
				bottom: 10rpx;
			}

			.optional {
				position: absolute;
				right: 30rpx;
				bottom: 10rpx;
				font-size: 24rpx;

				font-weight: 400;
				color: #FFFFFF;
				width: 110rpx;
				height: 48rpx;
				line-height: 48rpx;
				text-align: center;
				background: #DC483C;
				border-radius: 24rpx;
			}

			.reduce>image {
				position: absolute;
				right: 140rpx;
				bottom: 10rpx;
				width: 44rpx;
				height: 44rpx;
				position: absolute;

			}

			.goods_count {
				position: absolute;
				right: 98rpx;
				bottom: 10rpx;
			}

			.add>image {
				position: absolute;
				right: 30rpx;
				bottom: 10rpx;
				width: 44rpx;
				height: 44rpx;
				position: absolute;

			}

		}

	}


}
</style>